<template>
  <!-- 最近直播专题 -->
  <div class="home_live_box">
    <div class="list">
      <div class="title">
        <!-- 专块标签 -->
        <SpecialTitle>
          <template v-slot:left>最近直播</template>
          <template v-slot:right>
            <router-link to="openClass" class="link">
              更多直播
              <svg class="icon_more" aria-hidden="true">
                <use xlink:href="#icon-htmal5icon45"></use>
              </svg>
            </router-link>
          </template>
        </SpecialTitle>
      </div>
      <!-- 专块列表 -->
      <div class="c_home_live_item" v-for="item in [1, 2]" :key="item">
        <LiveItem1 />
      </div>
    </div>
  </div>
</template>

<script>
import SpecialTitle from "@/components/specialTitle/index.vue";
import LiveItem1 from "@/components/live/LiveItem1.vue";
export default {
  components: { LiveItem1, SpecialTitle },
};
</script>

<style lang="less" scoped>
.icon_more {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15em;
  fill: currentColor;
  margin: 0 0.5rem;
}
.home_live_box {
  width: 95%;
  border-radius: 0.3rem;
  margin: 0.5rem auto 0.5rem;
  background-color: #9bdbff1a;
  .title {
    width: 100%;
    padding: 0.5rem 0;
    .link {
      color: #353535;
      display: flex;
      align-items: center;
    }
  }
  .list {
    padding: 0.5rem;
    box-sizing: border-box;
    .c_home_live_item {
      margin: 0.5rem 0;
    }
  }
}
</style>
